import { Dropdown, Image, Space } from "antd";
import "./index.less";
import BasicLayout, { WaterMark } from "@ant-design/pro-layout";
import { EditOutlined, LogoutOutlined, UserOutlined } from "@ant-design/icons";
import { history } from "umi";
import login_logo from "@/assets/images/logo_login.png";
export default function IndexPage(props: any) {
  const {
    routes,
    route,
    children,
    location: { pathname = "/" }
  } = props;
  return (
    <div id="app">
      <BasicLayout
        theme="dark"
        layout="mix"
        fixedHeader={true}
        location={{ pathname }}
        collapsedButtonRender={false}
        siderWidth={180}
        route={route}
        siderMenuType="group"
        // contentStyle={{
        //   paddingInline: 0,
        //   paddingBlock: 0,
        //   background: "#f0f2f5",
        //   height: `calc(100vh - 76px)`
        // }}
        onMenuHeaderClick={e => history.replace("/")}
        // headerTitleRender={(logo, title, _) => {
        //   const defaultDom = <a>{<Image src={login_logo} width={133} height={46} preview={false} style={{ transform: "translateY(-5px)" }} />}</a>;
        //   if (typeof window === "undefined") return defaultDom;
        //   if (document.body.clientWidth < 1400) {
        //     return defaultDom;
        //   }
        //   if (_.isMobile) return defaultDom;
        //   return <>{defaultDom}</>;
        // }}
        headerContentRender={(sets: any) => {
          return (
            <div className="ant-layout-header-content-render">
              <div className="header-routes-link">
                <Space>
                  {sets.menuData
                    .filter((item: any) => !item.hideInMenu)
                    .map((item: any) => (
                      <div className="header-routes-link-item" key={item.name} onClick={() => history.replace(item.children[0].path)}>
                        {item.name}
                      </div>
                    ))}
                </Space>
              </div>
            </div>
          );
        }}
        avatarProps={{
          style: {
            color: "#fff",
            background: "#fff"
          },
          icon: <UserOutlined />,
          src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
          size: "small",
          title: (
            <span
              style={
                {
                  // color: "#fff"
                }
              }
            >
              七妮妮
            </span>
          ),
          render: (props, dom) => {
            return (
              <Dropdown
                menu={{
                  items: [
                    {
                      key: "editPassword",
                      icon: <EditOutlined />,
                      label: "修改密码"
                    },
                    {
                      key: "logout",
                      icon: <LogoutOutlined />,
                      label: "退出登录"
                    }
                  ]
                }}
              >
                {dom}
              </Dropdown>
            );
          }
        }}
      >
        <div className="global-layout-container">{children}</div>
      </BasicLayout>
      <WaterMark width={160} height={100} content={`张三 12345567890`} rotate={-24} fontSize={14} fontColor="rgba(28,33,48,.08)" />
    </div>
  );
}
